<template>
  <div class="back-money-container">
    <div class="back-money-cell">
      <div class="title">商品状态:</div>
      <div class="content">{{statusText}}</div>
    </div>
    <div class="back-money-cell">
      <div class="title">退款原因:</div>
      <div class="content" v-text="detail.returnReson  || '暂无原因'"></div>
    </div>
    <div class="back-money-cell">
      <div class="title">退款金额:</div>
      <div class="content" v-text="detail.returnPrice"></div>
    </div>
    <div class="back-money-cell" v-if="detail.images">
      <div class="title">凭证:</div>
      <div class="content">
        <el-image
          style="width: 100px; height: 100px"
          v-for="(item,index) in (detail.images ?detail.images.split(',') : [])"
          :key="index"
          :src="item"
          :preview-src-list="srcList"
        >></el-image>
      </div>
    </div>
    <div class="button-container" v-if="detail.appStu == 0">
      <el-button plain type="primary" @click="handleConfirm(1)">同意</el-button>
      <el-button @click="handleCancel(2)">拒绝</el-button>
    </div>
    <div class="back-money-cell" v-else>
      <div class="title">退款进度:</div>
      <div class="content">
        <el-timeline>
          <el-timeline-item :timestamp="detail.returnCreateTime || '时间未知'" placement="top">
            <el-card>
              <h4>退款发起，审核中</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item
            v-if="detail.appStu == 1"
            :timestamp="detail.returnTime || '时间未知'"
            placement="top"
          >
            <el-card>
              <h4>退款成功</h4>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="detail.appStu == 2"
            :timestamp="detail.returnTime || '时间未知'"
            placement="top"
          >
            <el-card>
              <h4>已拒绝退款</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      statusText: "",
      srcList: []
    };
  },
  methods: {
    initData(detail) {
      console.log(detail);
      this.detail = detail;
      this.srcList = detail.images ? detail.images.split(",") : [];
      //   if (this.detail.images) {
      //     // this.detail.images = JSON.parse(this.detail.images)
      //   }
      if (detail.status == "2") {
        this.statusText = "已付款,未发货";
      } else if (detail.status == "3") {
        this.statusText = "已发货,未确认";
      } else if (detail.status == "4") {
        this.statusText = "交易成功";
      } else if (detail.status == "5") {
        this.statusText = "交易关闭";
      } else if (detail.status == "6") {
        this.statusText = "已评价";
      } else if (detail.status == "7") {
        this.statusText = "退货中";
      } else if (detail.status == "8") {
        this.statusText = "退货成功";
      } else if (detail.status == "9") {
        this.statusText = "退货失败";
      }
    },
    handleCancel(status) {
      this.$prompt("请输入拒绝理由", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          let param = {
            id: this.detail.returnId, //退款表主键
            appcustomerId: "", //审批人标识
            appStu: status, //审批状态 0待审批 1 同意 2拒绝
            orderId: this.detail.id, //订单标识
            appResult: value, //审批意见
            type: this.detail.returnType, //退款类型 0订单退款 1 单商品退款
            orderDetailId: this.detail.returnDetailId || "" //订单商品表id 单商品时传
          };
          this.$service.applyReturn(param).then(res => {
            if (res.code == "00000") {
              this.$emit("submit", false);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    handleConfirm(status) {
      this.$confirm("是否确认退款?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(value => {
          let param = {
            id: this.detail.returnId, //退款表主键
            appcustomerId: "", //审批人标识
            appStu: status, //审批状态 0待审批 1 同意 2拒绝
            orderId: this.detail.id, //订单标识
            appResult: value, //审批意见
            type: this.detail.returnType, //退款类型 0订单退款 1 单商品退款
            orderDetailId: this.detail.returnDetailId || "" ,//订单商品表id 单商品时传
            refundAmount:this.detail.returnPrice*100
          };

          this.$service.applyReturn(param).then(res => {
            if (res.code == "00000") {
              this.$emit("submit", false);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding-top: 10px !important;
}
.back-money-container {
  width: 100%;
  .back-money-cell {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .title {
      font-weight: bold;
      width: 80px;
      margin-right: 20px;
      text-align: right;
    }
    .content {
      flex: 1;
      display: inline-flex;
      flex-wrap: wrap;
      .el-image {
        margin-top: 5px;
        margin-right: 10px;
      }
    }
  }
}

.button-container {
  margin-top: 150px;
  display: flex;
  justify-content: flex-end;
}
</style>